<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>display</title>
    <style>
        span {
            /*
                display
                    - 用来设置元素的类型
                    - 可选值：
                        inline 将元素设置为行内元素
                        block 将元素设置为块元素
                        inline-block 行内块元素
                            - 行内块兼具行内元素和块元素的特点
                            - 不独占一行，又可以设置宽高
                            - 注意：
                                行内块的特点和文本很像，所以布局时尽量少用
                        none 隐藏元素

            */
            display: inline-block;
            width: 200px;
            height: 200px;
            background-color: #ff0;
        }

        /*span:nth-child(2){*/
        /*    display: none;*/
        /*}*/

        /*span:first-child:hover + span{*/
        /*    display: inline-block;*/
        /*}*/

        span:first-child{
            /*
                visibility
                    - 用来设置一个元素的可见性
                    - 可选值：
                        visible，默认值 元素可见
                        hidden 元素是隐藏的在页面中不可见，但是依然占据页面的位置
            */
            visibility: hidden;
        }

    </style>
</head>
<body>
<span>我是一个span</span>
<span>我是span2</span>
</body>
</html>